<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>userList</title>
    <link rel="stylesheet" href="/css/bootstrap.css"></link>
    <script type="text/javascript" src="/js/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="/js/My97DatePicker/lang/zh-cn.js"></script>
    <script type="text/javascript" src="/js/jquery/jquery-1.10.2.min.js"></script>
    <script>
        $(function() {
            // 找到id="checkAll"的元素
            $("#checkAll").change(function(){// 当复选框状态改变时
                // 找到所有name="ids"的复选框
                $(":checkbox[name='ids']").prop("checked", $(this).prop("checked"));// 让所有name="ids"的复选框与全选框状态一致

                /**
                 * // 读取属性值
                 * var isChecked = $(this).prop("checked");
                 *
                 * // 设置属性值
                 * $(":checkbox[name='ids']").prop("checked", true);
                 *
                 * // 禁用按钮
                 * $("#next").prop("disabled", true);
                 */
            });

            $("#deleteBtn").click(function() {// 当删除按钮被点击时
                if ($(":checked[name='ids']").length == 0) { // 检查是否有选中的复选框
                    alert("请选择要删除的行");// 弹出提示
                    return// 停止执行后面的代码
                }
                if (confirm("确定要删除吗？")) { // 确认对话框
                    $("#df").submit(); // 提交删除表单
                }
            });
        });
    </script>
</head>
<body class="container"><!--用Bootstrap的容器样式，让内容居中显示 -->
<br/>
<h1>账单列表</h1>
<br/><br/>
<!--Bootstrap - 网页的"化妆师"
    什么是Bootstrap？
    简单说：Bootstrap是一套现成的网页样式库，让你不用自己写CSS就能做出漂亮的页面。
-->
<div class="with:80%">
    <!-- 表单样式 -->
    <!--
      form-inline：让表单元素水平排列（在一行内显示）
      对比：默认是垂直排列（每个元素占一行）
    -->
    <!-- 查询表单 (qf) - 用于搜索和分页 -->
    <form class="form-inline" id="qf"   action="/bill/list-page"  method="post">

        <!--
          hidden：隐藏字段，用户看不到但会提交到服务器
          用于传递分页参数
        -->
        <input type="hidden" name="pageNum" id="pageNum" th:value="${page.pageNum}"><!--页码-->
        <input type="hidden" name="pageSize" id="pageSize" th:value="${page.pageSize}"><!--展示的数据-->

        <!--
          form-group：把相关的表单元素分组，自动添加间距
          比如"标签+输入框"作为一个组
        -->
        <div class="form-group">
            <!-- control-label：专门的表单标签样式 -->
            <label for="typeId" class="control-label">类型</label>
            <!-- form-control：统一的输入框样式（圆角、边框、内边距） -->
            <select name="typeId" id="typeId" class="form-control">
                <option value="">全部</option>
                <option th:each="t : ${types}" th:value="${t.id}" th:text="${t.name}" th:selected="${t.id == bill.typeId}"></option>
            </select>
        </div>
        <div class="form-group">
            <label for="date1" class="control-label" >开始时间</label>
            <input type="text" class="form-control" name="date1" th:value="${#dates.format(bill.date1, 'yyyy-MM-dd')}" id="date1" placeholder="开始时间" onclick="WdatePicker()"/>
        </div>
        <div class="form-group">
            <label for="date2" class="control-label">结束时间</label>
            <input type="text" class="form-control" name="date2" th:value="${#dates.format(bill.date2, 'yyyy-MM-dd')}"  id="date2" placeholder="结束时间" onclick="WdatePicker()"/>
        </div>
        <div class="form-group">
            <input type="submit" value="查询" class="btn btn-info" />
            &nbsp; &nbsp;
            <input type="reset" value="重置" class="btn btn-info" />
            &nbsp; &nbsp;
            <a href="/bill/toAdd" class="btn btn-info">添加</a>

            <input type="button" class="btn btn-info" value="删除" id="deleteBtn" />
        </div>


        <!--
        <删除表单 (df) - 用于批量删除
        <form action="/bill/delete" method="post" id="df">
            <input type="checkbox" name="ids" th:value="${b.id}">
              复选框：用户勾选要删除的行
              name="ids"：所有复选框同名，提交时会以数组形式传递
              th:value="${b.id}"：每个复选框的值是对应账单的ID
        </form>
        -->
    </form>
</div>
<br/>

<div class="with:80%">
    <!-- 表格样式 -->
    <!--
      table：基础表格样式
      table-striped：斑马纹（交替行背景色）
      table-bordered：带边框的表格
    -->
    <table class="table table-striped table-bordered">
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="checkAll">
            </th>
            <th>标题</th>
            <th>时间</th>
            <th>金额</th>
            <th>类别</th>
            <th>说明</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <form action="/bill/delete" method="post" id="df">
            <!-- 循环显示列表 -->

            <!--
              分解：参数列表：容器
              - th:each：循环指令，类似"对于列表中的每个元素..."
              - b,status：b是当前元素，status是循环状态（第几个、奇数偶数等）
              - ${page.list}：要循环的列表数据
            -->

            <!-- 条件样式
            <th:style="${status.even} ? 'background-color: #A3C6C8'">

              分解：
              - 如果status.even为true（偶数行），就设置背景色 否则就什么都不显示
              - 这就是为什么表格有斑马纹效果
            -->
        <tr th:each="b,status : ${page.list}" th:style="${status.even} ? 'background-color: #A3C6C8'">
            <td>
                <input type="checkbox" name="ids" th:value="${b.id}">
            </td>
            <!--
             分解：
             - th:text：Thymeleaf指令，意思是"把这里的内容替换成..."
             - ${b.title}：从后台传过来的数据中取b对象的title属性
             - "标题"：默认显示内容（如果Thymeleaf没工作，就显示这个）
           -->
            <td th:text="${b.title}">标题</td>

            <!-- 日期格式化 -->
            <!--
              分解：
              - #dates.format：Thymeleaf的日期格式化工具 参数是：需要格式化的日期,格式化的样式
              - bill.date1：要格式化的日期
              - 'yyyy-MM-dd'：格式化成"年-月-日"的样子
            -->
            <td th:text="${#dates.format(b.billTime, 'yyyy-MM-dd')}">时间</td>
            <td th:text="${b.price}">金额</td>
            <td th:text="${b.typeName}">类别</td>
            <td th:text="${b.explain}">说明</td>
            <td>
                <!--URL链接的三种写法-->
                <!-- 方法1：管道符号拼接（最直观）
                <a th:href="|/bill/delete/${b.id}|">删除-1</a>
                < |/bill/delete/${b.id}| 会变成 /bill/delete/123

                 方法2：字符串拼接
                <a th:href="'/bill/delete/' + ${b.id}">删除-2</a>

                 方法3：Thymeleaf标准语法（最规范）
                <a th:href="@{/bill/toUpdate(id=${b.id})}">修改</a>
                 @{}会自动处理上下文路径，更安全 -->

                <a th:href="|/bill/delete/${b.id}|">删除-1</a>
                <a th:href="'/bill/delete/' + ${b.id}">删除-2</a>
                <a th:href="@{/bill/toUpdate(id=${b.id})}">修改</a>
            </td>
        </tr>
        </form>
        </tbody>
    </table>
</div>

<!-- 分页样式 -->
<!-- pagination：分页组件专用样式 -->
<ul class="pagination">
    <!-- 按钮样式 -->
    <!--
      btn：基础按钮样式
      btn-info：信息按钮（蓝色），还有：
      - btn-default：默认（灰色）
      - btn-primary：主要（深蓝）
      - btn-success：成功（绿色）
      - btn-warning：警告（橙色）
      - btn-danger：危险（红色）
    -->
    <li><button class="btn btn-default" id="first">第一页</button></li>
    <li><button class="btn btn-default" id="prev">上一页</button></li>
    <li th:each="p: ${page.navigatepageNums}">
        <button class="btn btn-default" th:text="${p}" name="pn" th:disabled="${p == page.pageNum}" >#</button>
    </li>
    <li><button class="btn btn-default" id="next" >下一页</button></li>
    <li><button class="btn btn-default" id="last">最后页</button></li>


    <!--
      显示分页统计信息：
      - page.total：总记录数
      - page.pages：总页数
      - page.pageSize：每页行数
    -->
    <span style="font-size: 18px;margin-left: 5px;" th:text="|共${page.total}条记录,共${page.pages}页, 每页 ${page.pageSize} 行数|">共条  记录,共  页, 每页  行数</span>
    <select id="setRows" >
        <option value="5"    th:selected="${page.pageSize == 5}">5</option>
        <option value="10"   th:selected="${page.pageSize == 10}">10</option>
        <option value="20"  th:selected="${page.pageSize == 20}" >20</option>
        <option value="30"  th:selected="${page.pageSize == 30}">30</option>
    </select>

</ul>

<script>
    //分页控件交互

    //分页状态数据
    var pageNum = [[${page.pageNum}]]; //当前页码
    var pageCount = [[${page.pages}]]; //总页数
    var hasNextPage = [[${page.hasNextPage}]]; //有下一页
    var hasPreviousPage = [[${page.hasPreviousPage}]]; //有上一页

    //分页监听事件
    $("#next").click(function() { //下一页
        $("#pageNum").val(pageNum + 1);
        $("#qf").submit();
    });
    $("#prev").click(function() { //下一页
        $("#pageNum").val(pageNum - 1);
        $("#qf").submit();
    });
    $("#first").click(function() { //下一页
        $("#pageNum").val(1);
        $("#qf").submit();
    });
    $("#last").click(function() { //下一页
        $("#pageNum").val(pageCount);
        $("#qf").submit();
    });

    //判断边界
    // 边界控制：如果没有下一页，就禁用按钮
    if (!hasNextPage) {
        $("#next").prop("disabled", true);
        $("#last").prop("disabled", true);
    }
    if (!hasPreviousPage) {
        $("#prev").prop("disabled", true);
        $("#first").prop("disabled", true);
    }

    //页码事件
    // 找到所有name="pn"的按钮

    // 点击页码按钮
    $("button[name='pn']").click(function() {
        $("#pageNum").val($(this).html());// 设置页码为按钮上的数字
        $("#qf").submit();// 提交查询表单
    })

    //每页行数事件
    // 改变每页显示行数
    $("#setRows").change(function() {
        $("#pageSize").val($(this).val());// 设置每页行数为选择的值
        $("#pageNum").val(1);// 重置到第一页（因为行数变了）
        $("#qf").submit();
    })

    /**
     * 表单提交的触发方式
     * // 方式1：点击提交按钮自动提交
     * <input type="submit" value="查询">
     *
     * // 方式2：通过JavaScript手动提交
     * $("#qf").submit();  // 提交查询表单
     * $("#df").submit();  // 提交删除表单
     */

</script>

</body>
</html>